<template>
    <el-card shadow="hover" class="layout-padding-auto" >
     <!-- 页面顶部导航 -->
     <header class="dashboard-header">
      <div class="header-left">
        <h1>前箱选垫</h1>
      </div>
      <div class="header-center">
        <p>{{ currentTime }}</p>
      </div>
      <div class="header-right">
        <p>十四事业部装备中心开发</p>
      </div>
    </header>
        <!-- 选择界面 -->
        <div style="text-align: center;"  class="divcontainer">
            <div class="divcontainer_sub1">
                <span>
                    模式选择:
                    <el-button round plain type="info" @click="toggleParttern">{{funcPattern?'查询模式':'手动选垫'}}</el-button> 
                </span>
            </div>
    
            <div  class="divcontainer_sub7">
                <span v-show="funcPattern">
                    <input v-model="inquireString" type="text" placeholder="请输入内容" class="input-field" />
                    <el-button type="primary" @click="InquireByMaterialCode">查询</el-button> 
                    <el-popconfirm title="确定删除吗？" @confirm="DeleteWrongData">
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </span>
            </div>
            <div class="divcontainer_sub1">
                <span>
                    <el-button round plain type="info" @click="openPort">连接串口</el-button>
                    <el-button round plain type="info" @click="closePort">关闭串口</el-button>
                </span>
                <el-button class="circle-button" :style="serialColor"></el-button>
                
            </div>
        </div><br>
        
        <!-- 扫码界面 -->
        <div class="divcontainer">
            
            <div class="divcontainer_sub3">
                <div class="sn-info" >前箱码: {{padSelectData.QXAssmeblyCode}}</div>
            </div>
            <div class="divcontainer_sub3">
                <div class="sn-info" >前箱托盘SN: {{padSelectData.QXSN}}</div>
            </div>
        
          <div class="divcontainer_sub3">
                <div class="sn-info" >电机码: {{padSelectData.TZAssmeblyCode}}</div>
            </div>
            <div class="divcontainer_sub3">
                <div class="sn-info" >电机托盘SN: {{ padSelectData.TZSN }}</div>
            </div>
        </div>
        <div class="divid">
            <el-divider></el-divider>
        </div>
        <!-- 物料绑定界面 -->
        <div class="container">
            <div class="div1">
                <div >
                    <table class="info-table">
                    <tr>
                        <!-- <th>前箱SN</th> -->
                        <th>差轴深度</th>
                        <th>副轴深度</th>
                        <th>发动机轴深度</th>
                    </tr>
                    <tr>
                        <!-- <td>
                            {{ padSelectData.QXSN }}
                        </td> -->
                        <td>
                            {{ padSelectData.LQC }}
                        </td>
                        <td>
                            {{ padSelectData.LQFZ }}
                        </td>
                        <td>
                            {{ padSelectData.LQF }}
                        </td>
                    </tr>
                </table>
                </div>
                <div >
                <table class="info-table">
                    <tr>
                        
                        <th>差轴高度</th>
                        <th>副轴高度</th>
                        <th>发动机轴高度</th>
                    </tr>
                    <tr>
                        <td>
                            {{ padSelectData.LHC }}
                        </td>
                        <td>
                            {{ padSelectData.LHFZ }}
                        </td>
                        <td>
                            {{ padSelectData.LHF }}
                        </td>
                    </tr>
                </table>
               </div>
               <div>
                <table class="info-table">
                    <tr>
                        <th>差轴垫片厚度</th>
                        <th>副轴垫片厚度</th>
                        <th>发动机轴垫片厚度</th>
                    </tr>
                    <tr >
                        <td>
                            {{ padSelectData.TCD }}~{{ padSelectData.TCU}}
                        </td>
                        <td>
                            {{ padSelectData.TFZD }}~{{ padSelectData.TFZU }}
                        </td>
                        <td>
                            {{ padSelectData.TFD }}~{{ padSelectData.TFU }}
                        </td>
                    </tr>
                </table>
              </div>
                <div>
                <table class="info-table">
                    <tr>
                        <th>差轴垫片复测值</th>
                        <th>副轴垫片复测值</th>
                        <th>发动机轴垫片复测值</th>
                    </tr>
                    <tr >
                        <td>
                          <el-input 
                              v-model="manalRetestValue.Cvalue" 
                              placeholder="请输入复测值"
                              :class="{'warning-input': isCValueOutOfRange}"
                              @change="validateRetestValues"
                          >
                              <template #append>
                                  <el-icon v-if="isCValueOutOfRange" color="red" :size="20">
                                      <Warning />
                                  </el-icon>
                                  <el-icon v-else-if="manalRetestValue.Cvalue" color="green" :size="20">
                                      <CircleCheck />
                                  </el-icon>
                              </template>
                          </el-input>
                          <div v-if="isCValueOutOfRange" class="error-message">
                              超出范围: {{ padSelectData.TCD }}~{{ padSelectData.TCU }}
                          </div>
                        </td>
                        <td>
                          <el-input 
                              v-model="manalRetestValue.FZvalue" 
                              placeholder="请输入复测值"
                              :class="{'warning-input': isFZValueOutOfRange}"
                              @change="validateRetestValues"
                          >
                              <template #append>
                                  <el-icon v-if="isFZValueOutOfRange" color="red" :size="20">
                                      <Warning />
                                  </el-icon>
                                  <el-icon v-else-if="manalRetestValue.FZvalue" color="green" :size="20">
                                      <CircleCheck />
                                  </el-icon>
                              </template>
                          </el-input>
                          <div v-if="isFZValueOutOfRange" class="error-message">
                              超出范围: {{ padSelectData.TFZD }}~{{ padSelectData.TFZU }}
                          </div>
                        </td>
                        <td>
                          <el-input 
                              v-model="manalRetestValue.Fvalue" 
                              placeholder="请输入复测值"
                              :class="{'warning-input': isFValueOutOfRange}"
                              @change="validateRetestValues"
                          >
                              <template #append>
                                  <el-icon v-if="isFValueOutOfRange" color="red" :size="20">
                                      <Warning />
                                  </el-icon>
                                  <el-icon v-else-if="manalRetestValue.Fvalue" color="green" :size="20">
                                      <CircleCheck />
                                  </el-icon>
                              </template>
                          </el-input>
                          <div v-if="isFValueOutOfRange" class="error-message">
                              超出范围: {{ padSelectData.TFD }}~{{ padSelectData.TFU }}
                          </div>
                        </td>
                    </tr>
                </table>
               </div>
               <div >
                <table class="info-table">
                    <tr>
                        <th>差轴过盈量</th>
                        <th>副轴间隙值</th>
                        <th>发动机轴间隙值</th>
                    </tr>
                    <tr>
                        <td>
                          {{CMarginValue}}
                        </td>
                        <td>
                          {{ FZMarginValue }}
                        </td>
                        <td>
                          {{FMarginValue }}
                        </td>
                    </tr>
                </table>
               </div>
               <div class="div3" v-show="padSelectData.QXSN">
                <div class="module">
                    <div class="module-header">
                        <h2>差速器垫片</h2>
                    </div>
                    <div class="module-content">
                    <ul>
                        <li>{{ padSelectData.CType }}</li>
                    </ul>
                    </div>
                </div>
                <div class="module">
                    <div class="module-header">
                        <h2>副轴垫片</h2>
                    </div>
                    <div class="module-content">
                   <!-- <p>这里是模块的内容区域。</p> -->
                    <ul>
                        <li>{{ padSelectData.FZType }}</li>
                    </ul>
                    </div>
                </div>
                <div class="module">
                    <div class="module-header">
                        <h2>发动机轴垫片</h2>
                    </div>
                    <div class="module-content">
                   <!-- <p>这里是模块的内容区域。</p> -->
                    <ul>
                        <li>{{ padSelectData.FType }}</li>
                    </ul>
                    </div>
                </div>
                </div>
                <div class="div3">
                    <!-- <div>
                        <button @click="testshow" class="smooth-button"> 测试</button>
                    </div>
                    <div>
                        <button @click="testshowT" class="smooth-button"> 测试2</button>
                    </div> -->
                </div>
            </div>
        
            <div class="separator"></div>
            <div class="div2">
                
                <h3 style="font-size: 20px;text-align: center;">工位日志</h3>
                <ul class="log-ul" v-for="item in stateInfo.AllLogs">
                    <li v-if="item.LogType=='good'" style="font-size: 16px;">{{ item.Date_Time }}: {{ item.Log }}</li>
                    <li v-else style="color: red;font-size: 16px; ">{{ item.Date_Time }}: {{ item.Log }}</li>
                </ul>
            </div>
        
        </div>
    
    </el-card>
</template>
    
    
    
    
<script setup lang="ts" name="前箱选垫">
import {ref, reactive, watch, onMounted, getCurrentInstance, defineAsyncComponent, nextTick,computed, onUnmounted} from 'vue';
import { Console } from 'console';
import axios from 'axios';
const ci = getCurrentInstance() as any;
import {  ElMessageBox, ElMessage,ElTable,ElTableColumn } from 'element-plus';
import { useRouter } from "vue-router";
import internal from 'stream';
import other from '/@/utils/other';
import request from '/@/utils/request';
import { HubConnectionBuilder } from '@microsoft/signalr';
import { text } from 'stream/consumers';
import { isRegExp } from 'util/types';
// 添加图标导入
import { Warning, CircleCheck } from '@element-plus/icons-vue'


//#region 添加计算属性来监控值是否超出范围
const isCValueOutOfRange = computed(() => {
    if (!manalRetestValue.value.Cvalue || !padSelectData.value.TCD || !padSelectData.value.TCU) return false;
    const value = parseFloat(manalRetestValue.value.Cvalue);
    const min = parseFloat(padSelectData.value.TCD);
    const max = parseFloat(padSelectData.value.TCU);
    return value < min || value > max;
});

const isFZValueOutOfRange = computed(() => {
    if (!manalRetestValue.value.FZvalue || !padSelectData.value.TFZD || !padSelectData.value.TFZU) return false;
    const value = parseFloat(manalRetestValue.value.FZvalue);
    const min = parseFloat(padSelectData.value.TFZD);
    const max = parseFloat(padSelectData.value.TFZU);
    return value < min || value > max;
});

const isFValueOutOfRange = computed(() => {
    if (!manalRetestValue.value.Fvalue || !padSelectData.value.TFD || !padSelectData.value.TFU) return false;
    const value = parseFloat(manalRetestValue.value.Fvalue);
    const min = parseFloat(padSelectData.value.TFD);
    const max = parseFloat(padSelectData.value.TFU);
    return value < min || value > max;
});

// 验证复测值
const validateRetestValues = () => {
    if (isCValueOutOfRange.value || isFZValueOutOfRange.value || isFValueOutOfRange.value) {
        ElMessage.warning('部分复测值超出允许范围，请检查！');
    }
    
    // 可以在这里添加提交逻辑或其他处理
};

//#endregion 添加计算属性来监控值是否超出范围
 

//#region 计算间隙值和过盈量
const CMarginValue = computed(()=>{
  if (!padSelectData.value.LQC || !padSelectData.value.LHC) return "null";
  const lqc = parseFloat(padSelectData.value.LQC);
  const lhc = parseFloat(padSelectData.value.LHC);
  const value = lqc-lhc;
  return value.toFixed(4);
})

const FZMarginValue = computed(()=>{
  if (!padSelectData.value.LQFZ || !padSelectData.value.LHFZ) return "null";
  const lqc = parseFloat(padSelectData.value.LQFZ);
  const lhc = parseFloat(padSelectData.value.LHFZ);
  const value = lqc-lhc;
  return value.toFixed(4);
})

const FMarginValue = computed(()=>{
  if (!padSelectData.value.LQF || !padSelectData.value.LHF) return "null";
  const lqc = parseFloat(padSelectData.value.LQF);
  const lhc = parseFloat(padSelectData.value.LHF);
  const value = lqc-lhc;
  return value.toFixed(4);
})
//#endregion 计算间隙值和过盈量

// 添加对padSelectData的watch，当数据变化时重置复测值
// watch(() => [padSelectData.value.TCD, padSelectData.value.TCU, padSelectData.value.TFZD, 
//              padSelectData.value.TFZU, padSelectData.value.TFD, padSelectData.value.TFU], () => {
//     manalRetestValue.value = {
//         Cvalue: null,
//         FZvalue: null,
//         Fvalue: null
//     };
// }, { deep: true });



// 产线、工位选择信息
interface SelectedMessage {  
    StationCode: null | string; 
    LineCode: null | string;  
}  
const selectedMessage = ref<SelectedMessage>({  
    StationCode: null,  
    LineCode: null,  
});

//选垫数据
interface PadSelectData{
    TZSN: null | string; 
    QXSN: null | string;
    LQC: null | string; 
    LQFZ: null | string;
    LQF: null | string; 
    LHC: null | string;
    LHFZ: null | string; 
    LHF: null | string;
    TCU: null | string; 
    TCD: null | string;
    TFZU: null | string; 
    TFZD: null | string;
    TFU: null | string; 
    TFD: null | string;
    CType: null | string;
    FZType: null | string; 
    FType: null | string;
    TZAssmeblyCode: null | string;
    QXAssmeblyCode: null | string;
}
const padSelectData = ref<PadSelectData>({
    TZSN: null , 
    QXSN: null ,
    LQC: null , 
    LQFZ: null ,
    LQF: null , 
    LHC: null ,
    LHFZ: null , 
    LHF: null ,
    TCU: null , 
    TCD: null ,
    TFZU: null , 
    TFZD: null ,
    TFU: null , 
    TFD: null ,
    CType: null ,
    FZType: null , 
    FType: null ,
    TZAssmeblyCode: null ,
    QXAssmeblyCode: null,
    });


// 标志位，表示是否读取到历史选择信息
const flagValue = ref<number>(0);
const virtualSN = ref<string | null>(null)
const StationName = ref('')

//串口连接状态
const serialColor = ref('background-color:red;width:30px;height:30px;margin-top:8px') 
const port = ref(null);
const reader = ref(null);

//手动输入的复测值
interface ManualRetestValue {  
    Cvalue: null | string; 
    FZvalue: null | string;  
    Fvalue: null | string; 
}  

const manalRetestValue = ref<ManualRetestValue>({  
  Cvalue: null,  
  FZvalue: null,  
  Fvalue:null
});

//串口扫码数据
const textSN = ref('')
//扫码结果
const SNMessage = ref('无扫码信息')
const OldSN = ref('')

interface Dictionary {  
    [key: string]: any; // 任何类型的值  
}
//状态数据
const stateInfo = reactive({
    //产线信息
    AllLines: [] as any[],
    //工位信息
    AllStations: [] as any[],

    //工位日志信息
    AllLogs: [] as any[],       // TAG = 1
    AllBindings: [] as any[],  // TAG = 2
});


// 接受报错推送信息 
let connection: signalR.HubConnection|null = null;   

const startConnection = async () => {  //连接服务器
  try {  
    connection = new HubConnectionBuilder()  
      .withUrl("/NotificationHub")  
      //.configureLogging(signalR.LogLevel.Information)  
      .withAutomaticReconnect()
      .build();  

    connection.on("ReceiveMessage", (message) => {  //注册事件
        if(message.lineCode == selectedMessage.value.LineCode && message.stationCode == selectedMessage.value.StationCode){
            
            flushUI(selectedMessage.value.LineCode, selectedMessage.value.StationCode);
        }
        if(message.stationCode =="PadSelectValue"){
            inquireString.value = message.lineCode;
            InquireByMaterialCode();
        }
    }); 
    await connection.start(); 
  } catch (err) {  
    //console.error("Error starting SignalR connection:", err);  
  }  
};  

const stopConnection = () => {  
  if (connection) {  
    try {  
      connection.stop();  
    } catch (err) {  
    }  
  }  
};  

//模式切换
const funcPattern = ref(false);
const inquireString = ref('');
const toggleParttern = ()=>{
    funcPattern.value = !funcPattern.value
}

const SelectFlag = ref(false);

const InquireByMaterialCode = ()=>{
    request({
           url: 'api/MaterialPD/ScanToSelectPad',
           method: 'post',
           data: {
                'lineCode':selectedMessage.value.LineCode,
                'stationCode':selectedMessage.value.StationCode,
                'scanData': inquireString.value,   
                'TZSN':padSelectData.value.TZSN,
                'QXSN':padSelectData.value.QXSN,
                'LHC':padSelectData.value.LHC,
                'LHFZ':padSelectData.value.LHFZ,
                'LHF':padSelectData.value.LHF,
                'LQC':padSelectData.value.LQC,
                'LQFZ':padSelectData.value.LQFZ,
                'LQF':padSelectData.value.LQF,
                'TZAssmeblyCode':padSelectData.value.TZAssmeblyCode,
                'QXAssmeblyCode':padSelectData.value.QXAssmeblyCode,
                'SelectFlag':SelectFlag.value,
                'Pattern':true,
                    }
                    }).then(res => {
                        padSelectData.value.TZSN = res.TZSN,
                        padSelectData.value.QXSN = res.QXSN,
                        padSelectData.value.LQC = res.LQC,
                        padSelectData.value.LQFZ = res.LQFZ,
                        padSelectData.value.LQF = res.LQF,
                        padSelectData.value.LHC = res.LHC,
                        padSelectData.value.LHFZ = res.LHFZ,
                        padSelectData.value.LHF = res.LHF,
                        padSelectData.value.TCU = res.TCU
                        padSelectData.value.TCD= res.TCD,
                        padSelectData.value.TFZU = res.TFZU,
                        padSelectData.value.TFZD = res.TFZD,
                        padSelectData.value.TFU = res.TFU,
                        padSelectData.value.TFD = res.TFD,
                        padSelectData.value.CType = res.CType,
                        padSelectData.value.FZType = res.FZType,
                        padSelectData.value.FType = res.FType,
                        padSelectData.value.TZAssmeblyCode = res.TZAssmeblyCode,
                        padSelectData.value.QXAssmeblyCode = res.QXAssmeblyCode,
                        SelectFlag.value = res.SelectFlag,
                        flushUI(selectedMessage.value.LineCode,selectedMessage.value.StationCode)
                         })
                    }

const DeleteWrongData = ()=>{
    request({
           url: 'api/MaterialPD/PadSelectDataDelete',
           method: 'post',
           data: {
                'lineCode':selectedMessage.value.LineCode,
                'stationCode':selectedMessage.value.StationCode,
                'scanData': inquireString.value,   
                'TZSN':padSelectData.value.TZSN,
                'QXSN':padSelectData.value.QXSN,
                'LHC':padSelectData.value.LHC,
                'LHFZ':padSelectData.value.LHFZ,
                'LHF':padSelectData.value.LHF,
                'LQC':padSelectData.value.LQC,
                'LQFZ':padSelectData.value.LQFZ,
                'LQF':padSelectData.value.LQF,
                'TZAssmeblyCode':padSelectData.value.TZAssmeblyCode,
                'QXAssmeblyCode':padSelectData.value.QXAssmeblyCode,
                'SelectFlag':SelectFlag.value,
                'Pattern':funcPattern.value,
                    }
                    }).then(res => {
                        flushUI(selectedMessage.value.LineCode,selectedMessage.value.StationCode)
                         })
                    }

const testshow = ()=>{
    // request({
    //        url: 'api/MaterialPD/ScanToSelectPad',
    //        method: 'post',
    //        data: {
    //             'lineCode':selectedMessage.value.LineCode,
    //             'stationCode':selectedMessage.value.StationCode,
    //             'scanData': 'TZ220XYE 3G4131551',   
    //             'TZSN':padSelectData.value.TZSN,
    //             'QXSN':padSelectData.value.QXSN,
    //             'LHC':padSelectData.value.LHC,
    //             'LHFZ':padSelectData.value.LHFZ,
    //             'LHF':padSelectData.value.LHF,
    //             'LQC':padSelectData.value.LQC,
    //             'LQFZ':padSelectData.value.LQFZ,
    //             'LQF':padSelectData.value.LQF,
    //             'TZAssmeblyCode':padSelectData.value.TZAssmeblyCode,
    //             'QXAssmeblyCode':padSelectData.value.QXAssmeblyCode,
    //             'SelectFlag':SelectFlag.value,
    //             'Pattern':funcPattern.value,
    //                 }
    //                 }).then(res => {
    //                     padSelectData.value.TZSN = res.TZSN,
    //                     padSelectData.value.QXSN = res.QXSN,
    //                     padSelectData.value.LQC = res.LQC,
    //                     padSelectData.value.LQFZ = res.LQFZ,
    //                     padSelectData.value.LQF = res.LQF,
    //                     padSelectData.value.LHC = res.LHC,
    //                     padSelectData.value.LHFZ = res.LHFZ,
    //                     padSelectData.value.LHF = res.LHF,
    //                     padSelectData.value.TCU = res.TCU
    //                     padSelectData.value.TCD= res.TCD,
    //                     padSelectData.value.TFZU = res.TFZU,
    //                     padSelectData.value.TFZD = res.TFZD,
    //                     padSelectData.value.TFU = res.TFU,
    //                     padSelectData.value.TFD = res.TFD,
    //                     padSelectData.value.CType = res.CType,
    //                     padSelectData.value.FZType = res.FZType,
    //                     padSelectData.value.FType = res.FType,
    //                     padSelectData.value.TZAssmeblyCode = res.TZAssmeblyCode,
    //                     padSelectData.value.QXAssmeblyCode = res.QXAssmeblyCode,
    //                     SelectFlag.value = res.SelectFlag,
    //                     flushUI(selectedMessage.value.LineCode,selectedMessage.value.StationCode)
    //                      })

             inquireString.value = "131475-13978378-00-20241109-2665";
            InquireByMaterialCode();
                    }

const testshowT = ()=>{
    request({
           url: 'api/MaterialPD/ScanToSelectPad',
           method: 'post',
           data: {
                'lineCode':selectedMessage.value.LineCode,
                'stationCode':selectedMessage.value.StationCode,
                'scanData': '142408-13978378-00-20241106-0170',   
                'TZSN':padSelectData.value.TZSN,
                'QXSN':padSelectData.value.QXSN,
                'LHC':padSelectData.value.LHC,
                'LHFZ':padSelectData.value.LHFZ,
                'LHF':padSelectData.value.LHF,
                'LQC':padSelectData.value.LQC,
                'LQFZ':padSelectData.value.LQFZ,
                'LQF':padSelectData.value.LQF,
                'TZAssmeblyCode':padSelectData.value.TZAssmeblyCode,
                'QXAssmeblyCode':padSelectData.value.QXAssmeblyCode,
                'SelectFlag':SelectFlag.value,
                'Pattern':funcPattern.value,
                    }
                    }).then(res => {
                        console.log('ad',res),
                        padSelectData.value.TZSN = res.TZSN,
                        padSelectData.value.QXSN = res.QXSN,
                        padSelectData.value.LQC = res.LQC,
                        padSelectData.value.LQFZ = res.LQFZ,
                        padSelectData.value.LQF = res.LQF,
                        padSelectData.value.LHC = res.LHC,
                        padSelectData.value.LHFZ = res.LHFZ,
                        padSelectData.value.LHF = res.LHF,
                        padSelectData.value.TCU = res.TCU
                        padSelectData.value.TCD= res.TCD,
                        padSelectData.value.TFZU = res.TFZU,
                        padSelectData.value.TFZD = res.TFZD,
                        padSelectData.value.TFU = res.TFU,
                        padSelectData.value.TFD = res.TFD,
                        padSelectData.value.CType = res.CType,
                        padSelectData.value.FZType = res.FZType,
                        padSelectData.value.FType = res.FType,
                        padSelectData.value.TZAssmeblyCode = res.TZAssmeblyCode,
                        padSelectData.value.QXAssmeblyCode = res.QXAssmeblyCode,
                        SelectFlag.value = res.SelectFlag,
                        flushUI(selectedMessage.value.LineCode,selectedMessage.value.StationCode)
                         })
}

// 页面加载时
onMounted(() => {
    selectedMessage.value.LineCode='DQ-TG-2',
    selectedMessage.value.StationCode = '2-OP3180-0',
    flushUI(selectedMessage.value.LineCode, selectedMessage.value.StationCode),
    updateTime();
    setInterval(updateTime, 1000);
    //创建signalR连接
    startConnection();
});


// 当前时间
const currentTime = ref('');
const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
};
onUnmounted(() => {
    //断开signalR连接
    
    stopConnection();
});


const flushUI = (lineCode: string | null, stationCode: string | null) => {
        if(lineCode != null && stationCode != null && lineCode != '' && stationCode != '') {
               request({
                url: '/api/BaseInformation/Station/GetUiInfo',
                method: 'post',
                data: {
                    'LineCode': selectedMessage.value.LineCode,
                    'StationCode': selectedMessage.value.StationCode
                }}).then(res=>{
                    if(res.Code == '01') { //无工单信息
                        ClearInfo()
                    } else {
                        stateInfo.AllLogs = res.Logs;       //工位日志
                    }
                })
            
        } else {
            // 清空界面显示信息
            ClearInfo()
        }
}

const ClearInfo = () => {
    stateInfo.AllLogs = [],
    stateInfo.AllBindings = []
};

//
// 弹窗状态

//打开串口
const openPort = async () => {
    try {
        port.value = await navigator.serial.requestPort();
        await port.value.open({ baudRate: 115200 });
    } 
    catch (error) {
        alert("打开串口失败："+error)
    }

    if (port.value && port.value.readable){

        serialColor.value = "background-color:green;width:30px;height:30px";
    }
    else
    {
        serialColor.value = "background-color:red;width:30px;height:30px";
    }

    await readPort();
};

//关闭串口
const closePort = () => {

    if (reader.value) 
    {
        reader.value.cancel();
    }

    if (port.value) 
    {
        port.value.close();
    }
    
    if (port.value && port.value.readable)
    {
        serialColor.value = "background-color:green;width:30px;height:30px";
    }
    else
    {
        serialColor.value = "background-color:red;width:30px;height:30px";
    }
};

//读取串口
const readPort = async () => {
    textSN.value = "";
    if (port.value && port.value.readable) {
        reader.value = port.value.readable.getReader();
        try {
            var flag = true
            while (true) 
            {
                const { value, done } = await reader.value.read();
                if (done) 
                {
                    textSN.value = value;
                    break;
                }
                for (let i = 0; i < value.length; i++) 
                {
                    if(!flag)
                    {
                        flag = true
                        textSN.value = ''
                    }
                    textSN.value += String.fromCharCode(value[i]);
                    if (value[i] === 13) 
                    {
                        flag = false
                        // 扫码完成
                        textSN.value = textSN.value.replace('\r','').replace('\n', '').trim()

                        virtualSN.value = textSN.value
                        if(selectedMessage.value.LineCode == null || selectedMessage.value.LineCode == '') 
                        {
                            SNMessage.value = "无效扫码,请选择产线"
                        } 
                        else if(selectedMessage.value.StationCode == null || selectedMessage.value.StationCode == '')
                        {
                            SNMessage.value = "无效扫码,请选择工位"
                        } 
                        else{
                            //处理手动扫码
                            if(virtualSN.value != null && virtualSN.value != '') {
                                request({
                                    url: 'api/MaterialPD/ScanToSelectPad',
                                    method: 'post',
                                    data: {
                                        'lineCode':selectedMessage.value.LineCode,
                                        'stationCode':selectedMessage.value.StationCode,
                                        'scanData': virtualSN.value,   //电机号
                                        'TZSN':padSelectData.value.TZSN,
                                        'QXSN':padSelectData.value.QXSN,
                                        'LHC':padSelectData.value.LHC,
                                        'LHFZ':padSelectData.value.LHFZ,
                                        'LHF':padSelectData.value.LHF,
                                        'LQC':padSelectData.value.LQC,
                                        'LQFZ':padSelectData.value.LQFZ,
                                        'LQF':padSelectData.value.LQF,
                                        'TZAssmeblyCode':padSelectData.value.TZAssmeblyCode,
                                        'QXAssmeblyCode':padSelectData.value.QXAssmeblyCode,
                                        'SelectFlag':SelectFlag.value,
                                        'Pattern':funcPattern.value,
                                    }
                                }).then(res => {
                                   padSelectData.value.TZSN = res.TZSN,
                                   padSelectData.value.QXSN = res.QXSN,
                                   padSelectData.value.LQC = res.LQC,
                                   padSelectData.value.LQFZ = res.LQFZ,
                                   padSelectData.value.LQF = res.LQF,
                                   padSelectData.value.LHC = res.LHC,
                                   padSelectData.value.LHFZ = res.LHFZ,
                                   padSelectData.value.LHF = res.LHF,
                                   padSelectData.value.TCU = res.TCU
                                   padSelectData.value.TCD= res.TCD,
                                   padSelectData.value.TFZU = res.TFZU,
                                   padSelectData.value.TFZD = res.TFZD,
                                   padSelectData.value.TFU = res.TFU,
                                   padSelectData.value.TFD = res.TFD,
                                   padSelectData.value.CType = res.CType,
                                   padSelectData.value.FZType = res.FZType,
                                   padSelectData.value.FType = res.FType,
                                   padSelectData.value.TZAssmeblyCode = res.TZAssmeblyCode,
                                   padSelectData.value.QXAssmeblyCode = res.QXAssmeblyCode,
                                   //SelectFlag.value = res.SelectFlag,
                                   flushUI(selectedMessage.value.LineCode,selectedMessage.value.StationCode)
                                })
                            }
                        } 
                    }
                }
            }

        } 
        catch (error) 
        {
            console.error(error);
        } 
        finally 
        {
            if (reader.value) {
                reader.value.releaseLock();
            }
        }
    }
};

</script>

<style>
.common-row{
    color: #000 !important;
    text-align: center !important;
    background-color:rgb(128, 122, 122) !important;
    width: 100% !important;
}
.success-row{
    color: #000 !important;
    text-align: center !important;
    width: 100%;
    background-color:rgb(6, 141, 6) !important;
    
}
.table-UI{
    background:#add8e6 !important;
    border: solid !important;
    border-radius: 0.5px;
}
</style>


<style scoped lang="scss">
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #1e3a8a 100%);
  padding: 15px 30px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 100;
  border-radius: 8px 8px 0 0;
}

.dashboard-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.8), rgba(255,255,255,0.3));
}

.header-left h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.header-center p,
.header-right p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.divcontainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.divcontainer_sub1 {
  display: flex;
  align-items: center;
  gap: 15px;
}

.input-field {
  padding: 10px 15px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 16px;
  width: 300px;
  transition: all 0.3s;
}

.input-field:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.circle-button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 0;
  position: relative;
}

.circle-button::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
}

.divcontainer_sub3 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 15px;
  border-radius: 8px;
  margin: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sn-info {
  font-size: 20px;
  font-weight: 600;
  color: #1e3a8a;
  padding: 10px 20px;
  background: #f1f5f9;
  border-radius: 6px;
  border-left: 4px solid #2563eb;
}

.container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.div1 {
  flex: 2;
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.div2 {
  flex: 1;
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  height: 500px;
  overflow-y: auto;
}

.info-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 20px;
}

.info-table th,
.info-table td {
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}

.info-table th {
  background: linear-gradient(to bottom, #f1f5f9, #e2e8f0);
  color: #334155;
  font-weight: 600;
  position: sticky;
  top: 0;
}

.info-table tr:nth-child(even) {
  background-color: #f8fafc;
}

.info-table tr:hover {
  background-color: #f1f5f9;
}

.div3 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.module-header {
  background: linear-gradient(to right, #1a365d, #2c5282);
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  border-bottom: 2px solid rgba(255,255,255,0.1);
}

.module-content ul li {
  text-align: center;
  padding: 15px;
  font-size: 24px; /* 增大字号 */
  font-weight: bold;
  color: #1a365d; /* 深色文字 */
  background-color: #f7fafc; /* 浅色背景 */
  border-radius: 6px;
  margin: 10px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.3s;
}

.module-content ul li:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background-color: #ebf8ff;
}

/* 不同垫片类型使用不同强调色 */
.module:nth-child(1) .module-content ul li { /* 差速器垫片 */
  border-left: 5px solid #3182ce;
  background: linear-gradient(to right, #ebf8ff, #f7fafc);
}

.module:nth-child(2) .module-content ul li { /* 副轴垫片 */
  border-left: 5px solid #38a169;
  background: linear-gradient(to right, #f0fff4, #f7fafc);
}

.module:nth-child(3) .module-content ul li { /* 发动机轴垫片 */
  border-left: 5px solid #dd6b20;
  background: linear-gradient(to right, #fffaf0, #f7fafc);
}

.module-content ul li::before {
  content: "▶";
  color: #3182ce;
  margin-right: 10px;
  font-size: 16px;
}

.module-content ul li {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 假设值越大越需要注意 */
.module-content ul li[data-value="high"] {
  color: #c53030;
  font-weight: bold;
}

.module-content ul li[data-value="medium"] {
  color: #dd6b20;
}

.module-content ul li[data-value="normal"] {
  color: #38a169;
}

.module {
  flex: 1;
  min-width: 280px; /* 稍微加宽 */
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s;
  border-top: 4px solid transparent;
}

.module:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 差速器垫片模块 */
.module:nth-child(1) {
  border-top-color: #3182ce;
}

/* 副轴垫片模块 */
.module:nth-child(2) {
  border-top-color: #38a169;
}

/* 发动机轴垫片模块 */
.module:nth-child(3) {
  border-top-color: #dd6b20;
}

.module-header h2 {
  margin: 0;
  position: relative;
}

.module-header h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: rgba(255,255,255,0.5);
  border-radius: 3px;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* 对新获取的值添加闪烁效果 */
.module-content ul li.highlight {
  animation: pulse 1s ease-in-out 2;
  background-color: #ebf8ff;
}

.log-ul {
  background: #ffffff;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  list-style-type: none;
}

.log-ul li {
  padding: 8px 12px;
  margin-bottom: 5px;
  border-radius: 4px;
  background: #f8fafc;
  font-size: 14px;
}

.log-ul li[style*="color: red"] {
  background: #fff5f5;
  border-left: 3px solid #ef4444;
}

.el-button {
  transition: all 0.3s;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.el-button--primary {
  background: linear-gradient(to right, #1e3a8a, #2563eb);
  border: none;
}

.el-button--danger {
  background: linear-gradient(to right, #dc2626, #ef4444);
  border: none;
}

.el-button--info {
  background: linear-gradient(to right, #64748b, #94a3b8);
  border: none;
  color: white;
}

@media (max-width: 1200px) {
  .container {
    flex-direction: column;
  }
  
  .div1, .div2 {
    width: 100%;
  }
  
  .div3 {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .divcontainer {
    flex-direction: column;
    gap: 15px;
  }
  
  .divcontainer_sub1, 
  .divcontainer_sub3,
  .divcontainer_sub7 {
    width: 100%;
    margin-right: 0;
  }
  
  .input-field {
    width: 100%;
  }
  
  .module {
    min-width: 100%;
  }
}

/* 添加警告输入框样式 */
.warning-input {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 1px var(--el-color-danger) inset;
        background-color: #fff6f6;
    }
}

.error-message {
    color: var(--el-color-danger);
    font-size: 12px;
    margin-top: 5px;
    animation: shake 0.5s;
}

/* 添加抖动动画效果 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* 优化输入框样式 */
.info-table input {
    text-align: center;
    font-size: 16px;
}

.info-table .el-input {
    width: 150px;
}

/* 为垫片模块添加警告状态 */
.module.warning {
    animation: pulseWarning 1.5s infinite;
    border-top-color: var(--el-color-danger);
}

@keyframes pulseWarning {
    0% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(245, 108, 108, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0); }
}
</style>